<template>
  <div>
    <section>
      <div class="wrapper">
        <div class="container">
          <div class="showBox">
            <div class="circle"></div>
            <div class="blue">
              <div class="content">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>
            </div>
            <div class="purple">
              <div class="content">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>
            </div>
            <p class="p404">404</p>
            <p class="p404">404</p>
          </div>
          <div class="text">
            <article>
              <p>嗨！看起来您迷路了<br>欢迎您来到404</p>
            </article>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

    <style scoped>
@keyframes circle {
    0% {
        width: 0;
        height: 0;
    }
}
.showBox .circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background-color: rgba(207, 106, 135, 0.4);
    box-shadow: inset 5px 20px 40px rgb(207 106 135 / 25%),
        inset 5px 0px 5px rgb(190 130 160 / 30%),
        inset 5px 5px 20px rgb(190 130 160 / 25%),
        2px 2px 5px rgb(255 255 255 / 20%);
    animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
    </style>